<template>
	<view class="com_unit" :style="{ 'align-items': position_view[position] }">
		<!-- <view class="com-rmb" :style="{ fontSize: `${r}rpx` }">
			¥
		</view>
		<view class="com-big" :style="{ fontSize: `${b}rpx` }">
			{{ smallOrBig({ price: comprice, type: 'b' }) }}
		</view>
		<view class="com-small" :style="{ fontSize: `${s}rpx` }">
			{{ smallOrBig({ price: comprice, type: 's' }) }}
		</view> -->

		<view class="num" :style="{ fontSize: `${font}rpx` }">
			{{ num }}
		</view>
		<view class="unit" :style="{ fontSize: `${font * ratio}rpx` }">
			{{ unit }}
		</view>
	</view>
</template>

<script>
export default {
	name: 'smallPrice',
	props: {
		num: {
			type: [Object, String, Number],
			default: 0,
		},
		font: {
			type: [Number, String],
			default: 48,
		},
		ratio: {
			type: [Number, String, Number],
			default: 0.5,
		},
		unit: {
			type: [String],
		},
		position: {
			type: [Number, String],
			default: 'top',
		},
	},
	data() {
		return {
			dataprice: '',
			position_view: {
				top: 'flex-start',
				center: 'center',
				bot: 'flex-end',
			},
		};
	},
	created() {},
	mounted() {},
	options: {
		styleIsolation: 'shared',
	}, // 样式穿透
	methods: {},
	computed: {
		smallOrBig() {
			return function (e) {
				let { price, type } = e;
				if (price && price.indexOf('.') != -1) {
					if (type == 's') {
						return price.substring(price.indexOf('.'), price.length);
					} else if (type == 'b') {
						return price.substring(0, price.indexOf('.'));
					}
				} else {
					if (type == 's') {
						return '.00';
					} else if (type == 'b') {
						return price;
					}
				}
			};
		},
	},
};
</script>

<style lang="scss">
.com_unit {
	display: flex;
	line-height: 1;

	.unit {
		margin-left: 2rpx;
	}
}
</style>
